<template>
  <!-- 普通用户编辑弹框 -->
  <a-modal
    :title="title"
    width="700px"
    centered
    :visible="productServeVisible"
    :maskClosable="false"
    @ok="submitInform('form')"
    @cancel="close"
  >
    <a-form-model
      ref="form"
      :model="form"
      :rules="rules"
      v-bind="formLayout"
      class="inform-form"
      style="height:auto;"
    >
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item label="产品名称" prop="name">
            <a-input v-model="form.name" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-model-item label="跳转地址" prop="indexUrl">
            <a-textarea v-model="form.indexUrl" allow-clear />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { instantMsg } from "@/api/message";
export default {
  props: {
    //关闭弹框
    closeFunc: {
      type: Function,
      default: () => {}
    },
    //保存更新数据
    updateInform: {
      type: Function,
      default: () => {}
    },
    productServeVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ""
    },
    optFlag: {
      type: Number,
      default: 1
    },
    title: {
      type: String,
      default: "新增"
    }
  },
  data() {
    return {
      loading: false,
      form: {
        id: "",
        name: "",
        indexUrl: "",
        servicePath: ""
      },
      formLayout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 21 }
      },
      rules: {
        name: [{
            validator: (rule, value, callback) => {
              const whiteSpace = /^[^ ]+$/;
              if (value && !whiteSpace.test(value)) {
                callback(new Error("输入内容不能有空格"));
              } else {
                callback();
              }
            },
            trigger: ["blur", "change"]
          }, { required: true, message: "请输入产品名称", trigger: "blur" }],
        indexUrl: [{
            validator: (rule, value, callback) => {
              const whiteSpace = /^[^ ]+$/;
              if (value && !whiteSpace.test(value)) {
                callback(new Error("输入内容不能有空格"));
              } else {
                callback();
              }
            },
            trigger: ["blur", "change"]
          },
          { required: true, message: "请输入跳转地址", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    getData(id) {
      instantMsg.detail(id).then(res => {
        this.form.name = res.data.data.name;
        this.form.id = res.data.data.id;
        this.form.indexUrl = res.data.data.indexUrl;
        this.form.servicePath = res.data.data.servicePath;
        this.form.rootId = res.data.data.rootId;
      });
    },
    submitInform(formName) {
      //提交弹框表单
      this.loading = true;
      this.$refs[formName].validate(valid => {
        if (!valid) {
          this.loading = false;
          return false;
        }
        var params = Object.assign({}, this.form);
        if (this.optFlag == 2) {
          params.id = this.id;
          this.updateSubmit(params);
        } else {
          this.addSubmit(params);
        }
      });
    },
    addSubmit(params) {
      instantMsg
        .add(params)
        .then(res => {
          this.$message.success(res.data.msg);
          this.$emit("updateInform");
        })
        .catch(err => {
          this.$message.destroy();
          this.$message.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    updateSubmit(params) {
      instantMsg
        .update(params)
        .then(res => {
          this.$message.destroy();
          this.$message.success(res.data.msg);
          this.$emit("updateInform");
        })
        .catch(err => {
          this.$message.destroy();
          this.$message.error(err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //关闭弹框
    close() {
      this.$emit("closeFunc");
    }
  },
  watch: {
    productServeVisible(n) {
      if (n) {
        if (this.id) {
          //获取
          this.getData(this.id);
        }
      } else {
        this.$refs["form"].resetFields();
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.insertLable
  ul
    li
      float: left
      margin-right: 15px
      p
        color: #333333
      span
        color: #FF0000
        cursor: pointer
</style>